<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>PetStore Management</title>
<!--    <link rel="Stylesheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <script th:src="@{../js/jquery-3.5.1.min.js}"></script>
</head>
<style>
    *{
        padding: 0px;
        margin: 0px;
    }
    #Content {
        width: 100%;
        height: 95ex;
        color: #333;
        background-color: rgba(256,256,256,0.5);
        border-width: 0;
        position: relative;
        overflow: hidden;
    }
    #Catalog{
        display: block;
        margin-top: 3%;
        margin-left: 30%;
        width: 80ex;
        height: 80ex;
        font-size: 2ex;
        background-color:rgba(256,256,256,0);
        margin-bottom: 10ex;
    }
    table{
        display: block;
        /*position: absolute;*/
        /*top: 10ex;*/
        /*left: 10ex;*/
        width: 57ex;
        /*height: 60ex;*/
        font-size: 3ex;
        background-color: #ffffff;
        border-color: #56832c;
        border-width: 1ex;
        border-style: solid;
        /*margin-bottom: 10ex;*/
        float: left;
    }
    table tr{
        height: 4ex;

    }
    table td{
        width: 20ex;
    }

    a{
        display: block;
        text-decoration: none;
        color: #eaac00;
        font-weight: bold;
    }
    h3{
        float: left;
        position: absolute;
        top: 0ex;
        left: 32ex;
        font-size: 5ex;
    }

    input {
        border-width: .15ex .15ex .15ex .15ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        height: 2ex;
        font-size: 2ex;
    }
    select {
        border-width: .1ex .1ex .1ex .1ex;
        border-style: solid;
        border-color: #eaac00;
        background-color: #ffffff;
        height: 2ex;
        font-size: 2ex;
        color: #eaac00;
    }
    .button{
        border-width: .25ex .25ex .25ex .25ex;
        border-style: solid;
        border-color: #eaac00;
        display: inline-block;
        height: 5.5ex;
    }
    #edit{
        background-image: url("../image/EDIT.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        margin-top: 2ex;
        margin-left: 17ex;
    }
    #save{
        background-image: url("../image/SAVE.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 12ex;
        margin-top: 2ex;
        margin-left: 6ex;
    }
    #return{
        background-image: url("../image/RETURN.png");
        background-size: 100%;
        background-repeat: no-repeat;
        width: 15ex;
        margin-top: 2ex;
        margin-left: 6ex;
    }
    .Returnto{
        display: inline-block;
        float: left;
        position: absolute;
        top: 0ex;
        left: 2ex;
        height: 5ex;
        width: 50ex;
        background-image: url("../image/ReturntoManagementMainMenu.png");
        background-size: 100%;
        background-repeat: no-repeat;
        border-color: #eaac00;
        border-width: 0.4ex;
        border-style: solid;
    }

</style>
<body>
<div th:replace="manageCommon/managetop"></div>
<div id="Content">
        <a class="Returnto" href="/manage/main"></a>
    <div id="Catalog">
        <form action="" method="post" id="base">
            <h3>User Information</h3>
            <table>
                <tr>
                    <td>User ID:</td>
                    <td th:text="${session.baseAccount.username}">用户名</td>
                </tr>
                <tr>
                    <td>First name:</td>
                    <td><input style="width: 20ex" type="text" name="firstName" id="firstName" th:value="${session.baseAccount.firstName}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input style="width: 20ex"type="text" name="lastName" id="lastName" th:value="${session.baseAccount.lastName}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input style="width: 20ex"type="text" size="40" name="address1" id="address1" th:value="${session.baseAccount.address1}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text"style="width: 20ex" size="40" name="address2" id="address2" th:value="${session.baseAccount.address2}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" style="width: 20ex"name="city" th:value="${session.baseAccount.city}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text"style="width: 20ex" size="4" name="state" th:value="${session.baseAccount.state}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text"style="width: 20ex" size="10" name="zip" th:value="${session.baseAccount.zip}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" style="width: 20ex"size="15" name="country" th:value="${session.baseAccount.country}" disabled="disabled"/></td>
                </tr>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select style="width: 20ex" name="languagePreference" id="languagePreference" disabled="disabled">
                            <option value="english" th:selected = "${session.isEnglish}">english</option>
                            <option value="japanese" th:selected="${session.notEnglish}">japanese</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td>
                        <select style="width: 20ex" name="favouriteCategoryId" readonly="readonly" disabled="disabled">
                            <option value="FISH" th:selected = "${session.isFish}">FISH</option>
                            <option value="DOGS" th:selected="${session.isDogs}">DOGS</option>
                            <option value="REPTILES" th:selected="${session.isReptiles}">REPTILES</option>
                            <option value="CATS" th:selected="${session.isCat}">CATS</option>
                            <option value="BIRDS" th:selected="${session.isBird}">BIRDS</option>
                        </select>
                    </td>
                </tr>
            </table>
        </form>
        <input class="button" id="edit" type="button" style="display:inline-block;" th:onclick="revise()"/>
        <input class="button"id="save" type="button"  style="display:none;"  th:onclick="save()" />
        <input class="button"id="return" type="button"  style="display:inline-block;" th:onclick="returnUserList()"/>
        <script>
            // 设置页面可编辑
            function undisabled(){
                var form = document.getElementById("base");
                var input = form.getElementsByTagName("input");
                for(var i = 0 ;i <input.length;i++){
                    input[i].disabled = false;
                }
                var select = form.getElementsByTagName("select");
                for(var j = 0;j<select.length;j++){
                    select[j].disabled = false;
                }
            }
            function indisabled(){
                var form = document.getElementById("base");
                var input = form.getElementsByTagName("input");
                for(var i = 0 ;i <input.length;i++){
                    input[i].disabled = true;
                }
                var select = form.getElementsByTagName("select");
                for(var j = 0;j<select.length;j++){
                    select[j].disabled = true;
                }
            }
            function revise(){
                undisabled();
                document.getElementById("edit").style.display = "none";
                document.getElementById("save").style.display = "inline-block";
                document.getElementById("save").style.marginLeft = "17ex";
            }
            function save(){
                let datas = $('#base').serialize();
                $.post('/manage/saveBasicInfo',datas,function (data) {
                    if(data.code===1){
                        console.log("修改成功")
                        indisabled();
                        document.getElementById("edit").style.display = "inline-block";
                        document.getElementById("save").style.display = "none";
                    }
                });
            }
            function returnUserList(){
                location.href = "/manage/usermanagement";
            }

        </script>
    </div>
</div>
<div th:replace="manageCommon/managebottom"></div>
</body>
</html>